<template>
  <div class="date-switcher">
    <img src="@/assets/icon/icon_left_nor.png" alt="" @click="prevDay" class="switch-button">
    <span class="current-date">{{ formattedDate }}</span>
    <img src="@/assets/icon/icon_right_nor.png"  @click="nextDay" class="switch-button" alt="">
    <span v-if="isToday" class="today-tag">今天</span>

  </div>
</template>

<script lang="ts" setup>
import { defineComponent, ref, computed } from 'vue'

// 初始化为当前日期
const currentDate = ref<Date>(new Date())

const emits = defineEmits(['timeSwitch']);

const handleClose = () => {
    emits('timeSwitch', formattedDate.value);
}
// 检查是否是今天
const isToday = computed(() => {
  const today = new Date()
  return (
    currentDate.value.getFullYear() === today.getFullYear() &&
    currentDate.value.getMonth() === today.getMonth() &&
    currentDate.value.getDate() === today.getDate()
  )
})

// 格式化日期显示
const formattedDate = computed(() => {
  const year = currentDate.value.getFullYear()
  const month = String(currentDate.value.getMonth() + 1).padStart(2, '0')
  const day = String(currentDate.value.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
})

// 前一天
const prevDay = () => {
  const newDate = new Date(currentDate.value)
  newDate.setDate(newDate.getDate() - 1)
  currentDate.value = newDate
  handleClose();
}

// 后一天
const nextDay = () => {
  const newDate = new Date(currentDate.value)
  newDate.setDate(newDate.getDate() + 1)
  currentDate.value = newDate
  handleClose();
}

    // return {
    //   currentDate,
    //   formattedDate,
    //   isToday,
    //   prevDay,
    //   nextDay
    // }
handleClose();

</script>

<style scoped>
.date-switcher {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 18px;
}

.switch-button {
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.switch-button:hover {
  background-color: #e0e0e0;
}

.current-date {
  width: 120px;
  text-align: center;
  font-weight: 600;
  color: #000;
  font-size: 16px !important;
}

.today-tag {
  padding: 2px 8px;
  color: #000;
  border-radius: 4px;
  font-size: 12px;
  margin-right: 8px;
}
</style>